<script>
    // @ts-nocheck
    /** @type {import('./$types').PageData} */
    export let data;
    import { page } from "$app/stores";
    import NoData from "@/components/ui/NoData.svelte";
    import FilterItems from "@/components/ui/filterItems.svelte";
    import Pagination from "@/components/ui/Pagination.svelte";

    $: activeUrl = $page.url.pathname;
    $: id = $page.url.searchParams.get("id");
    

    let searchObject = {
        name: $page.url.searchParams.get("name") || "",
        damage: $page.url.searchParams.get("damage") ? $page.url.searchParams.get("damage").split(",") : [],
        tier: $page.url.searchParams.get("tier") || "",
        type: $page.url.searchParams.get("type") ? $page.url.searchParams.get("type").split(",") : [],
        ammo: $page.url.searchParams.get("ammo") || "",
        craft: $page.url.searchParams.get("craft") || "",
    };

    const selectChange = (isMultiple, name, type) => {
        if (!isMultiple) {
            searchObject[name] = [type];
        } else {
            if (searchObject[name].indexOf(type) == -1) {
                searchObject[name].push(type);
            } else {
                searchObject[name].splice(searchObject[name].indexOf(type), 1);
            }
            searchObject = searchObject;
        }
        onSearch();
    };

    const damageArr = [
        { label: "全部伤害", value: "" },
        { label: "动能伤害", value: 1 },
        { label: "电弧伤害", value: 2 },
        { label: "烈日伤害", value: 3 },
        { label: "虚空伤害", value: 4 },
        // {label:'突袭Raid',value:5},
        { label: "冰影伤害", value: 6 },
        { label: "缚丝伤害", value: 7 },
    ];

    const tierArr = [
        { label: "全部武器", value: "" },
        { label: "普通武器", value: 2, color: "rgba(195, 188, 180,1)" },
        { label: "罕见武器", value: 3, color: "rgba(54, 111, 66,1)" },
        { label: "稀有武器", value: 4, color: "rgba(80, 118, 163,1)" },
        { label: "传说武器", value: 5, color: "rgba(82, 47, 101,1)" },
        { label: "异域武器", value: 6, color: "rgba(206, 174, 51,1)" },
    ];

    const typeArr = [
        { label: "全部类型", value: "" },
        { label: "自动步枪", value: 5 },
        { label: "手炮", value: 6 },
        { label: "脉冲步枪", value: 7 },
        { label: "斥堠步枪", value: 8 },
        { label: "融合步枪", value: 9 },
        { label: "狙击步枪", value: 10 },
        { label: "霰弹枪", value: 11 },
        { label: "机枪", value: 12 },
        { label: "火箭发射器", value: 13 },
        { label: "手枪", value: 14 },
        { label: "刀剑", value: 54 },
        { label: "追踪步枪", value: 2489664120 },
        { label: "榴弹发射器", value: 153950757 },
        { label: "微型冲锋枪", value: 3954685534 },
        { label: "线性融合步枪", value: 1504945536 },
        { label: "偃月", value: 3871742104 },
        { label: "弓箭", value: 3317538576 },
        { label: "术士职业物品", value: 21 },
        { label: "泰坦职业物品", value: 22 },
        { label: "猎人职业物品", value: 23 },
    ];

    const ammoArr = [
        { label: "全部武器", value: "" },
        { label: "主武器弹药", value: 1 },
        { label: "特殊弹药", value: 2 },
        { label: "重型弹药", value: 3 },
    ];

    const craftArr = [
        { label: "全部武器", value: "" },
        { label: "是", value: 1 },
        { label: "否", value: 2 },
    ];

    const onSearch = () => {
        let searchParams = new URLSearchParams(searchObject);
        let queryString = searchParams.toString();
        window.location = $page.url.origin + "/weapons/1?" + queryString;
    };

    //过滤 函数
    const filterFunc = (name, data) => {
        let keyName = name + "Arr";
        let filterData = eval(keyName);

        let filterMaps = filterData.map((el) => el.value);
        let linxText = [];
        data.forEach((element) => {
            if (filterMaps.indexOf(Number(element)) != -1) {
                linxText.push(filterData[filterMaps.indexOf(Number(element))].label);
            }
        });
        return linxText;
    };

    //渲染颜色
    const filterColor = (tier) => {
        let tierText = tier + "武器";

        let arr = tierArr.map((el) => el.label);
        if (arr.indexOf(tierText) != -1) {
            return tierArr[arr.indexOf(tierText)].color;
        }
        return false;
    };

    const seo_keyword = () => {
        let arr = data.base.map((el) => el.name);
        return arr.join(",");
    };

    const seo_description = () => {
        let arr = data.base.map((el) => el.name);
        return arr.join(",");
    };

    const onKeydown = (e) => {
        if (e.key == "Enter" && searchObject.name) {
            onSearch();
        }
    };

    const handlePageChange = (newPage)=>{
        // currentPage = newPage;
        let searchParams = new URLSearchParams(searchObject);
        let queryString = searchParams.toString();
        window.location = `${$page.url.origin}/weapons/${newPage}/?${queryString}`;
    }
</script>

<svelte:head>
    <title>光影思维-命运2-枪械列表</title>
    <meta name="keyword" content={seo_keyword()} />
    <meta name="description" content="在《命运2》枪械列表中查找所有武器，了解不同武器的属性、技能和最佳用途。为PVE和PVP选择最佳装备，提升您的守护者实力。，为玩家提供详细的武器统计、使用指南和最佳组合推荐。无论您是新手还是老玩家，这里都有适合您的武器选择。" />
</svelte:head>
<div class="container p-6">
    <FilterItems title="枪械名称:">
        <input class="mx-2 h-8 bg-black rounded-lg border-black" type="text" placeholder="搜索枪名" on:keydown={onKeydown} bind:value={searchObject.name} />
    </FilterItems>

    <FilterItems title="枪械属性:">
        <div class="flex flex-wrap gap-2">
            {#each damageArr as item}
                <!-- svelte-ignore a11y-no-static-element-interactions -->
                <button class="mx-2 cursor-pointer px-2 py-1" on:click={() => selectChange(0, "damage", item.value)} class:on={searchObject.damage == item.value}>{item.label}</button>
            {/each}
        </div>
    </FilterItems>

    <FilterItems title="枪械等级:">
        <div class="flex flex-wrap gap-2">
            {#each tierArr as item}
                <!-- svelte-ignore a11y-no-static-element-interactions -->
                <button class="mx-2 cursor-pointer px-2 py-1" on:click={() => selectChange(0, "tier", item.value)} class:on={item.value == searchObject.tier}>{item.label}</button>
            {/each}
        </div>
    </FilterItems>

    <FilterItems title="枪械类别:">
        <div class="flex flex-wrap gap-2">
            {#each typeArr as item}
                <!-- svelte-ignore a11y-no-static-element-interactions -->
                <button class="mx-2 cursor-pointer px-2 py-1" on:click={() => selectChange(0, "type", item.value)} class:on={searchObject.type == item.value}>{item.label}</button>
            {/each}
        </div>
    </FilterItems>

    <FilterItems title="弹药类型:">
        <div class="flex flex-wrap gap-2">
            {#each ammoArr as item}
                <!-- svelte-ignore a11y-no-static-element-interactions -->
                <button class="mx-2 cursor-pointer px-2 py-1" on:click={() => selectChange(0, "ammo", item.value)} class:on={searchObject.ammo == item.value}>{item.label}</button>
            {/each}
        </div>
    </FilterItems>

    <FilterItems title="枪械塑性:">
        <div class="flex flex-wrap gap-2">
            {#each craftArr as item}
                <!-- svelte-ignore a11y-no-static-element-interactions -->
                <button class="mx-2 cursor-pointer px-2 py-1" on:click={() => selectChange(0, "craft", item.value)} class:on={searchObject.craft == item.value}>{item.label}</button>
            {/each}
        </div>
    </FilterItems>
    <!-- width:100%;margin-top:20px -->
    <table class="mt-8 w-full">
        <thead class="border bg-color1 hidden md:table-header-group md:border-color4">
            <tr>
                <th class="p-4 text-left ">枪械名称</th>
                <th class="p-4 text-left">枪械图片</th>
                <th class="p-4 text-left">枪械位置</th>
                <th class="p-4 text-left">枪械属性</th>
                <th class="p-4 text-left">枪械级别</th>
                <th class="p-4 text-left">枪械类别</th>
                <th class="p-4 text-left">是否可锻造</th>
                <th class="p-4 text-left">更多操作</th>
            </tr>
        </thead>
        <!-- svelte-ignore illegal-attribute-character -->
        <tbody class=" border-color4" flex md:flex-none md:border>
            {#each data.base as item, index}
                <tr class="border border-color4 grid mb-4 md:table-row">
                    <td class="p-4">
                        <a class=" text-theme" href={`/weaponsdetails/${item.weapon_hash}`}>{item.name}</a> 
                    </td>
                    <td class="p-4 ">
                        <div class=" relative">
                            <img width="84" height="84" class="w-24 rounded-lg" src={item.icon} alt={item.name} />
                            <img class="w-24 absolute top-0 left-0" src={item.iconWatermark} alt={item.name} />
                        </div>
                    </td>
                    <td class="p-4 ">
                        <div class="flex">
                            <img class=" h-5" alt={`枪械位置：${filterFunc("ammo", [item.ammoType])}`} class:filter={item.ammoType == 1} src={`/images/AmmoType/${item.ammoType}.png`} /> 
                            {filterFunc("ammo", [item.ammoType])}
                        </div>
                    </td>
                    <td class="p-4">
                        <div class="flex">
                            <img class=" mr-2  h-5" alt={`枪械属性:${filterFunc("damage", item.damageTypes)}`} class:filter={item.damageTypes == 1} src={`/images/DamageType/${item.damageTypes}.png`} />
                            {filterFunc("damage", item.damageTypes)}
                        </div>
                    </td>
                    <td class="p-4">
                        <span style={`color:${filterColor(item.tier)};font-weight: bold;`}>{item.tier}</span>
                    </td>
                    <td class="p-4">{item.type}</td>
                    <td class="p-4" style={`color:${item.can_craft ? "red" : ""}`}>{item.can_craft ? "可锻造" : "无锻造"}</td>
                    <td class="p-4"><a class="text-theme" href={`/weaponsdetails/${item.weapon_hash}`}>详情</a></td>
                </tr>
            {/each}
        </tbody>
    </table>

    {#if !data.base.length}
        <NoData></NoData>
    {/if}
    <Pagination totalPages={data.total} onPageChange={handlePageChange} />
</div>

<style lang="less">
    .on{
        background: #3c77ff;
        color: #fff;
        border-radius: 4px;
    }
</style>
